<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" lineWidth="15" :activeStyle="{
			             color: '#ff0000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="list1" ref="uTabs" :scrollable="false" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="mainpadding_top ffffff radius" v-for="item in list.data" :key="item.id" @click="jumpdetail('/pages/uberOrder/dingdanxq?id=',item.uber_id)">
				<view class="flexbetween">
					<view class="flexleft">
						<view class="margin_right lableradius waisong">外送</view>
						<view class="hong_text titletext bold">#{{item.id}}</view>
					</view>
					<view class="hong_text main_size" v-show="item.status==0">待接單</view>
					<view class="huang_text main_size" v-show="item.status==1">已接單</view>
					<view class="hong_text main_size" v-show="item.status==2">已拒絕</view>
				</view>
				<view class="margin_top2 xiaohui">訂單編號：{{item.uber_id}}</view>
				<view class="margin_top2 xiaohui">{{item.createtime_text}}</view>
				<view class="flexbetween margin_top2">
					<view class="hei_text main_size">客戶名稱：{{item.eater_name}}</view>
					<image class="shopPhone margin_left2" src="@/static/image/system/phoneShop.png" mode=""
						@click.stop="phone(item.eater_phone)"></image>
				</view>
				<view class="hei_text main_size margin_top2" v-show="item.special_instructions">
					顧客備注：{{item.special_instructions}}</view>
				<view class="margin_top2 hei_text main_size" v-if="item.status==1">接單時間：2025-05-05 05：02</view>
				<view class="xiaohui margin_top bold textright">
					共{{item.uberordergoods.length}}件，合計：
					<text class="xiaohuang">$115</text>
				</view>
				<view class="flexright margin_top2">
					<!-- // status 状态:0=待处理,1=已接受,2=已解决 -->
					<view class="listbtn margin-right" v-if="item.status==0" style="background-color: #17a34a;"
						@click.stop="jieshou(item.uber_id)">接受</view>
					<view class="listbtn" v-if="item.status==0" style="background-color: #ee4444;" @click.stop="uber_id=item.uber_id;show=true">拒絕
					</view>
				</view>
			</view>
		</view>
		<!-- 接單 -->
		<u-modal :show="show" showCancelButton confirmText="確認" cancelText="取消" confirmColor="#f5a623" title="選擇拒絕原因"
			@cancel="show=false" @confirm="confirmjj">
			<view class="slot-content">
				<view class="mainpadding">
					<picker-view indicator-style="height: 50px;" :value="currentvalue" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in fpgd_arr" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		name: "uberorderzj",
		data() {
			return {
				list1: [{
					id: 0,
					name: '未接單',
					badge: {
						value: 0,
					}
				}, {
					id: 1,
					name: '已接單',
					badge: {
						value: 0,
					}
				}, {
					id: 2,
					name: '已拒絕',
					badge: {
						value: 0,
					}
				}, {
					id: 3,
					name: '全部',
					badge: {
						value: 0,
					}
				}],
				tabsId: 0,
				shop_id: uni.getStorageSync("shop_id"),
				page: 1,
				list: {
					data: []
				},
				fpgd_name: "",
				fpgd_arr: [{
						name: "廚房已關閉",
						key: "KITCHEN_CLOSED"
					},
					{
						name: "客戶打電話取消",
						key: "CUSTOMER_CALLED_TO_CANCEL"
					},
					{
						name: "餐廳太忙了",
						key: "RESTAURANT_TOO_BUSY"
					},
					{
						name: "訂單驗證錯誤",
						key: "ORDER_VALIDATION"
					},
					{
						name: "商店已關閉",
						key: "STORE_CLOSED"
					},
					{
						name: "POS 尚未準備好",
						key: "POS_NOT_READY"
					},
					{
						name: "POS 處於離線狀態",
						key: "POS_OFFLINE"
					},
					{
						name: "門市訂單容量已滿",
						key: "CAPACITY"
					},
					{
						name: "地址問題",
						key: "ADDRESS"
					},
					{
						name: "其他",
						key: "OTHER"
					},
				],
				show: false,
				currentvalue: [0],
				uber_id:""
			};
		},
		methods: {
			confirmjj() { //拒絕
				this.show = false
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				this.http.request("/api/Ubercl/clUberOrder", "POST", {
					uber_id: this.uber_id,
					status: 2,
					deny_reason: this.fpgd_arr[this.currentvalue[0]].key,
					deny_des: this.fpgd_arr[this.currentvalue[0]].name
				}).then(res => {
					uni.hideLoading()
					this.http.toast(res.msg)
					this.getList()
				})
			},
			jieshou(uber_id) {
				this.http.modal('提示', "是否確認接單", true, (resp) => {
					if(resp){
						uni.showLoading({
							mask: true,
							title: "請稍後"
						})
						this.http.request("/api/Ubercl/clUberOrder", "POST", {
							uber_id,
							status: 1,
						}).then(res => {
							uni.hideLoading()
							this.http.toast(res.msg)
							this.getList()
						})
					}
				})
			},
			bindChange(e) {
				console.log(e);
				const val = e.detail.value
				this.currentvalue = e.detail.value
			},
			tabChage(e) {
				this.tabsId = e.id
				this.getList()
			},
			componentInit() {
				let that = this
				this.$nextTick(() => {
					// 解决uview u-tab，下划线异常
					that.$refs.uTabs.resize()
				});
				this.getList()
			},
			async getList(isPage, page) {
				// this.getorderMsg()//獲取當前頁面的tabs角標數量
				// this.$emit("zjchange","")//獲取父級角標數量
				// status 状态:0=待处理,1=已接受,2=已解决
				let obj = {
					"0": 0, //待接單
					"1": 1, // 待完成 
					"2": 2, //已完成
					"3": -1, //全部
				}
				let res = await this.http.request('/api/Ubercl/uberOrderList', 'POST', {
					page: page || 1,
					limit: 12,
					shop_id: this.shop_id,
					status: obj[this.tabsId]
				})
				if (res.code == 1) {
					let resList = res.data;
					let dataList = this.list;
					if (isPage == true) {
						this.list.data = dataList.data.concat(resList.data);
					} else {
						this.list = res.data
						this.list.data = resList.data;
					}
				} else {
					this.list.data = []
				}
			},
			onReachBottomZj() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.getList(true, page);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.listbtn {
		padding: 15rpx 40rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		color: #fff;
	}
</style>